<template>
  <div class="shop_ticket">
    <header>
      <el-button type="success" style="margin-bottom: 10px;" @click="grantShow = true">发放停车券</el-button>
    </header>

    <section>
      <el-table :data="tableData" height="100%" border>
        <el-table-column label="商户名称" prop="shopName" align="center"></el-table-column>
        <el-table-column label="平台发放数量(张)" prop="platformCount" align="center"></el-table-column>
        <el-table-column label="平台发放金额(元)" prop="platformAmount" align="center"></el-table-column>
        <el-table-column label="商户购买数量(张)" prop="shopCount" align="center"></el-table-column>
        <el-table-column label="商户购买金额(元)" prop="shopAmount" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="detailsShow = true,id = scope.row.id">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 分页 -->
    <footer>
      <el-pagination
        :current-page="searchForm.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="getTableData"
      />
    </footer>

    <el-dialog title="停车券发放" :visible.sync="grantShow" width="740px" :close-on-click-modal="false" :close-on-press-escape="false">
      <GrantShopTicket v-if="grantShow" @closeDialog="grantShow = false" @refresh="getTableData()" />
    </el-dialog>

    <el-dialog :visible.sync="detailsShow" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
      <Details :id = "id" v-if="detailsShow" @closeDialog="detailsShow = false" @refresh="" />
    </el-dialog>

  </div>
</template>

<script>
  import GrantShopTicket from './grantShopTicket.vue'
  import Details from './shopTicketDetails.vue'

  export default {
    components: { GrantShopTicket, Details },
    data() {
      return {
        grantShow: false,
        detailsShow: false,
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        tableData: [],
        total: null,
      }
    },

    mounted() {
      this.getTableData();
    },

    methods: {
      getTableData() {
        this.$axios({
          method: 'post',
          url: '/shop/shop-info/getHaveParkTicketShop',
          data: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        this.getTableData();
      }
    }
  }
</script>

<style scoped>
  .shop_ticket {
    height: 100%;
  }

  header {
    height: 50px;
  }

  section {
    height: calc(100% - 100px);
  }

  footer {
    height: 50px;
    width: 100%;
  }




</style>
